<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="index2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="img_div">

<ul>

<li>
<img src="cs.jpg">
<section>
图片遮罩
</section>
</li>

<li>
<img src="cs.jpg">
<section>
图片遮罩
</section>
</li>

</ul>

</div>
<script type="text/javascript">
$(document).ready(function(e) {
	$('.img_div ul li').hover(function(){
		$(this).find('section').stop().animate({'top':'0px','opacity':'0.8'},300);
	},function(){
		$(this).find('section').stop().animate({'top':'-300px','opacity':'0'},300);	
	})
});
</script>
</body>
</html>
